<template>
  <a-descriptions bordered>
    <template v-for="i of detail">
      <a-descriptions-item v-if="i.type==CONFIG_TYPES.FILE" :label="i.name">
        <file-preview
          v-for="(item, index) of arrayWrap(data[i.slug])"
          :key="index"
          :file="item"
        />
      </a-descriptions-item>
      <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.MULTIPLE" :label="i.name">
        <span v-for="x of data[i.slug]" :key="x">{{ x }}<a-divider type="vertical"/></span>
      </a-descriptions-item>
      <a-descriptions-item v-else-if="i.type=='editor'" :label="i.name">
        <doc-preview
          :title="i.name"
          :content="data[i.slug]"
          :type="i.type"
        />
      </a-descriptions-item>
      <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.PASSWORD" :label="i.name">
        <a-input-password v-if="data[i.slug]" read-only :value="data[i.slug]" />
      </a-descriptions-item>
      <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.TEXTAREA" :label="i.name">
        <div v-html="formatContent(data[i.slug])"/>
      </a-descriptions-item>
      <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.DYNAMIC_INPUT" :label="i.name">
        <div v-html="formatContent(data[i.slug])"/>
      </a-descriptions-item>
      <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.DYNAMIC_TEXTAREA" :label="i.name">
        <div v-html="formatContent(data[i.slug])"/>
      </a-descriptions-item>
      <a-descriptions-item v-else :label="i.name">
        {{data[i.slug]}}
      </a-descriptions-item>
    </template>
  </a-descriptions>
</template>

<script>
import {arrayWrap} from '@/libs/utils'
import FilePreview from '@c/FilePreview'
import DocPreview from '@c/DocPreview'

export default {
  name: 'LzDetailPage',
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    detail: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    FilePreview,
    DocPreview,
  },
  methods: {
    arrayWrap,
    formatContent(content) {
      if (content !== null && content !== '') {
        return content.replace(/\n/g, "<br/>");
      }
    },
  },
}
</script>